import { Card, Form, Input, Button, Checkbox } from 'antd'

// 样式
import './index.min.css'
import logo from 'assets/img/logo.png'
// 登录表单的书写过程
/* 
1. 引入card 调整
2. 背景的宽度和高度撑满 
3. 引入背景图片
4. card要居中 设置宽高 设置logo
*/

import React, { Component } from 'react'

export default class Login extends Component {
  onFinish = (value) => {
    console.log(value)
  }
  render() {
    return (
      <div className="login-container">
        <Card className="login-form">
          <img src={logo} alt="" className="login-logo" />
          <Form name="basic" onFinish={this.onFinish}>
            <Form.Item
              name="mobile"
              validateTrigger={['onChange', 'onBlur']}
              rules={[
                {
                  required: true,
                  message: '请输入手机号'
                },
                {
                  pattern: /^1[3|5|7|9]\d{9}$/,
                  message: '手机号的格式不正确',
                  validateTrigger: 'onBlur'
                }
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                {
                  required: true,
                  message: '请输入手机验证码'
                },
                {
                  pattern: /\d{6}/,
                  message: '请输入正确格式的验证码'
                }
              ]}
            >
              <Input.Password />
            </Form.Item>

            {/* 
              1. 解决validator的问题 如何写validator的函数
              2. checkbox的值绑定什么
            */}
            <Form.Item
              name="remember"
              valuePropName="checked"
              rules={[
                {
                  required: true,
                  message: '请阅读并且勾选用户协议'
                },
                {
                  validator: (rule, value) => {
                    return value
                      ? Promise.resolve()
                      : Promise.reject(new Error('请勾选用户协议'))
                  }
                }
              ]}
            >
              <Checkbox>我已经阅读并且同意</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                点击登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}
